<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <base href="<%=basePath%>">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="css/H-ui.css" media="all">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/css/layui-muti-select.css" media="all">
    <title>新增用户</title>
</head>
<body>

<div style="margin-top:10px;">
<form id="insertF" method="post" class="layui-form" novalidate>
  <div class="layui-form-item">
    <label class="layui-form-label">名字<span style="color:red">*</span></label>
    <div class="layui-input-block">
      <input name="user.name" autocomplete="off" placeholder="请输入您的名字" class="layui-input" type="text" style="width:200px;"></td>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">用户名<span style="color:red">*</span></label>
    <div class="layui-input-block">
      <input id="username" name="user.username" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text" style="width:200px;"></td>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">密码<span style="color:red">*</span></label>
    <div class="layui-input-block">
      <input id="password" name="user.password" autocomplete="off" placeholder="请输入密码" class="layui-input" type="password" style="width:200px;"></td>
    </div>
  </div>
  
   <div class="layui-block">
         <label class="layui-form-label">角色<span style="color:red">*</span></label>
         <div class="layui-input-inline">
             <select name="roles.id"  multiple>
                 <option value="">请选择角色</option>
                 <c:forEach var="role" items="${roles}">
                 	<option value="${role.id}">${role.roleDescription}</option>
                 </c:forEach>
             </select>
         </div>
     </div>

  <div class="layui-form-item" style="margin-top: 10px;">
    <div class="layui-input-block">
      <!-- 必须使用a标签，使用button会自动提交一次user.do -->
      <a class="layui-btn" onclick="insert();">提交</a>
    </div>
  </div>
  </form>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
// 必须放入layui所规范的元素结构，Form模块才会对起进行重置渲染
layui.use(['element', 'laydate','form'], function(){
    var laydate = layui.laydate;
    var form = layui.form;
    var element = layui.element;
    $ = layui.$;
    form.render();
 	// json 格式化+高亮
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
});

// 提交用户信息
function insert(){
	// 获取表单中需要提交的用户信息，insertF 为 from 表单的ID，此处使用jquery取值
    var user = $("#insertF").serialize();
	console.log(user);
	// 使用ajax异步提交表单
    $.post('User_insert',user,function(result){
   		if(result.code == 0){
           //获取窗口索引
           var index = parent.layer.getFrameIndex(window.name);
           //关闭iframe页面
           parent.layer.alert(result.msg,function(){               
               parent.layer.close(index);
               parent.location.reload(); // 刷新父窗口
           }); 
   		}
    },'json');
};
</script>
</body>

</html>

